Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow nesting subcomponents like Images inside of Tables, Details, etc. #308

Merged
merged 1 commit into from
May 30, 2024
Merged

Allow nesting subcomponents like Images inside of Tables, Details, etc. #308

merged 1 commit into from
May 30, 2024

Conversation

jimkring
Copy link
Contributor

@jimkring jimkring commented May 6, 2024 •
edited by samuelcolvin
Loading

This PR allows FastUI components to be used as the values of DataModel's passed into Table and Details components. This means that one can have a column in a table that is an Image, Button, etc.

For example, let's say I have an object with a name and an image.

from pydantic import BaseCase
import fastui.components as c

class MyType(BaseClass):
  name: str
  # let's make icon a fastui `Image` component type
  icon: c.Image

# create an instance
my_object = MyType(name="meowzer", icon=c.Image(src="image.png"))

# try to render it inside of a `Details` component.
c.Page(
  components=[
    c.Details(data=my_object)
  ]
)

Before this PR:
name meowzer
icon src: image.png, type: Image,

After this PR:
name meowzer
icon image

FYI: @samuelcolvin @sydney-runkle

Note: Implements enhancement request #293

fix #293
fix #267

@codecov Codecov
Copy link

codecov bot commented May 6, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

📢 Thoughts on this report? Let us know!

@jimkring
Copy link
Contributor Author

jimkring commented May 6, 2024

@hramezani since you've been doing some work in Table and Details, I'd be curious to hear your thought/feedback on this PR, too.

@hramezani
Copy link
Member

@hramezani since you've been doing some work in Table and Details, I'd be curious to hear your thought/feedback on this PR, too.

Thanks @jimkring for the PR.
The change looks easy and good to me 👍 . let's wait for @samuelcolvin or @sydney-runkle to review.

samuelcolvin
samuelcolvin reviewed May 8, 2024
View reviewed changes
Copy link
Member

@samuelcolvin samuelcolvin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Beyond the philosophy side of things, I'm good with this.

src/npm-fastui/src/components/display.tsx
@@ -26,6 +28,28 @@ export const DisplayComp: FC<Display> = (props) => {
}
}

// todo: this list should probably be defined in the models file
const nestableSubcomponents = [
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there are two clean options here in terms of ways forward:

  1. Something like add FormattedText component #29 where we define a subset of components (or maybe they're not even included in regular components) that can be used in buttons and table cells and paragraphs (although I'm already seeing a problem that stuff like images belong in table cells but I think are illegal in paragraphs or buttons)
  2. We allow anything in a table cell, and DisplayObject just becomes a component, which I've wanted otherwise anyway. Perhaps we have some logic for the default components for table cells is a DisplayObject

Or maybe route 3 is we merge this to help @jimkring and worry about the ultimately correct solution later?

@samuelcolvin samuelcolvin mentioned this pull request May 8, 2024
Closed
@jimkring jimkring mentioned this pull request May 15, 2024
Open
@jimkring jimkring mentioned this pull request May 28, 2024
Closed
sydney-runkle
sydney-runkle approved these changes May 30, 2024
View reviewed changes
Copy link
Member

@sydney-runkle sydney-runkle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jimkring,

Awesome work here. Let's go with route 3 as mentioned by @samuelcolvin - merge this now, and refine nestable subcomponents down the line!

@sydney-runkle sydney-runkle merged commit 4b7c103 into pydantic:main May 30, 2024
17 checks passed
This was referenced May 30, 2024
Open
Closed
@jimkring
Copy link
Contributor Author

Fantastic! Looking forward to 0.7.0!

Thanks everyone for reviewing and collaborating on this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@samuelcolvin samuelcolvin samuelcolvin left review comments

@sydney-runkle sydney-runkle sydney-runkle approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

How can I embed a component like an c.Image in a c.Table or c.Detail? Table cell color
4 participants
@jimkring @hramezani @samuelcolvin @sydney-runkle